<template>
  <div class="order-details">
    <div class="header">
      <h2>订单详情</h2>
    </div>
    <div class="game-info">
      <img :src="orders.img" alt="游戏图片" />
    </div>
    <div class="order-info">
      <p>游戏时长：{{ orders.playDuration }}小时</p>
      <p>游戏时间：{{ orders.playTime }}</p>
      <p>订单编号：{{ orders.orderNumber }}</p>
      <p>费用：￥{{ orders.cost }}</p>
      <p>总金额：￥{{ orders.totalAmount }}</p>
      <p>支付方式：</p>
      <label>
        <input type="radio" name="paymentMethod" checked />
        微信支付
      </label><br>
      <button @click="goToPaymentPage">立即支付</button>
<!--      <div class="game-details">-->
<!--        <h3>{{ gameTitle }}</h3>-->
<!--        <p>{{ gameDescription }}</p>-->
<!--        <p>评分: {{ gameRating }}</p>-->
<!--        <p>参与人数: {{ participantCount }}</p>-->
<!--      </div>-->
    </div>
<!--    <div class="order-info">-->
<!--      <div class="info-item">-->
<!--        <span>陪玩游戏:</span>-->
<!--        <span>{{ companionGame }}</span>-->
<!--      </div>-->
<!--      <div class="info-item">-->
<!--        <span>陪玩时长:</span>-->
<!--        <span>{{ playDuration }}</span>-->
<!--      </div>-->
<!--      <div class="info-item">-->
<!--        <span>陪玩时间:</span>-->
<!--        <span>{{ playTime }}</span>-->
<!--      </div>-->
<!--      <div class="info-item">-->
<!--        <span>订单编号:</span>-->
<!--        <span>{{ orderNumber }}</span>-->
<!--      </div>-->
<!--      <div class="info-item">-->
<!--        <span>费用:</span>-->
<!--        <span>¥ {{ cost }}</span>-->
<!--      </div>-->
<!--      <div class="info-item">-->
<!--        <span>总金额:</span>-->
<!--        <span>¥ {{ totalAmount }}</span>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="payment-method">-->
<!--      <p>微信支付</p>-->
<!--      <i class="icon-check"></i>-->
<!--    </div>-->
<!--    <button @click="handlePayment">立即支付</button>-->
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      id:0,
      orders:{},
      paymentPageUrl:"/WxPay"
    };
  },
  methods: {
    findOrds(){
      axios.post(`/play/orders/findById?id=${this.id}`).then(res=>{
        this.orders = res.data.data;
      })
    },

    async goToPaymentPage() {
      // 生成一个10位的随机数字
      const orderId = Math.floor(Math.random() * 1000000000).toString();
      localStorage.setItem('finsessId', orderId)
      try {
        this.$router.push(`${this.paymentPageUrl}?orderId=${this.orders.id}`);
      } catch (error) {
        console.error('路由跳转失败', error);
        alert('支付页面跳转失败，请稍后再试');
      }
    },
    handlePayment() {
      // 处理支付逻辑
      this.$message.success('支付成功！');
    }
  },
  created() {
    this.id=localStorage.getItem("orderId");
    this.findOrds()
  }
}
</script>

<style scoped>
.order-details {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
}
.header {
  text-align: center;
}
.game-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.game-info img {
  width: 100px;
  height: 100px;
  border-radius: 5px;
}
.game-details {
  margin-left: 15px;
}
.order-info {
  margin-bottom: 20px;
}
.info-item {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.payment-method {
  display: flex;
  align-items: center;
}
.icon-check {
  margin-left: 5px;
  color: green;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>
